<script setup lang="ts">
  import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { ref, h, reactive, computed } from 'vue';
  import eChart from '/@/components/e-chart.vue';

  const formState = reactive({
    date: '',
    hour: false,
  });

  const columns = [
    { title: ' 监测站', dataIndex: 'station', key: 'station', width: 100, align: 'center' },
    { title: '电能(kWh)/占比', dataIndex: 'electric', key: 'electric', align: 'center' },
    { title: '水能(m³)/占比', dataIndex: 'water', key: 'water', align: 'center' },
    { title: '气能(m³)/占比', dataIndex: 'gas', key: 'gas', align: 'center' },
    { title: '热能(GJ)/占比', dataIndex: 'heat', key: 'heat', align: 'center' },
    { title: '冷能(GJ)/占比', dataIndex: 'cold', key: 'cold', align: 'center' },
  ];

  const tableData = ref([
    {
      station: '配电室A',
      electric: '1000/88.1%',
      water: '-',
      gas: '-',
      heat: '-',
      cold: '-',
    },
    {
      station: '泵房A',
      electric: '-',
      water: '500/78%',
      gas: '-',
      heat: '-',
      cold: '-',
    },
    {
      station: '气站A',
      electric: '-',
      water: '-',
      gas: '2000/30%',
      heat: '-',
      cold: '-',
    },
    {
      station: '锅炉房A',
      electric: '-',
      water: '-',
      gas: '-',
      heat: '1500/32%',
      cold: '-',
    },
    {
      station: '冷水机房A',
      electric: '-',
      water: '-',
      gas: '-',
      heat: '-',
      cold: '1200/23%',
    },
  ]);

  const electricOption = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          // name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
      ],
    };
  });

  const waterOption = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          // name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310],
        },
      ],
    };
  });

  const gasOption = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          // name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410],
        },
      ],
    };
  });

  const heatOption = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          // name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320],
        },
      ],
    };
  });

  const coldOption = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          // name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };
  });
</script>

<template>
  <div class="container">
    <div class="condition">
      <div class="formState">
        <span>时间选择:</span>
        <a-range-picker v-model:value="formState.date" />

        <a-checkbox v-model:checked="formState.hour">时</a-checkbox>

        <a-button type="primary">查询</a-button>
      </div>
    </div>

    <div class="info">
      <div class="left">
        <a-card>
          <div class="total">
            <span> 各监测站能耗总计:</span>
          </div>

          <a-table :columns="columns" :data-source="tableData" rowKey="id"></a-table>
        </a-card>
      </div>

      <div class="right">
        <a-card title="能耗值曲线图">
          <div class="rightCharts">
            <div class="charts">
              <span> 配电室A电能曲线图 </span>
              <div class="chart">
                <eChart :option="electricOption" name="electricOption" />
              </div>
            </div>
            <div class="charts">
              <span> 泵房A水能曲线图 </span>
              <div class="chart">
                <eChart :option="waterOption" name="waterOption" />
              </div>
            </div>
            <div class="charts">
              <span> 气站A气能曲线图 </span>
              <div class="chart">
                <eChart :option="gasOption" name="gasOption" />
              </div>
            </div>
            <div class="charts">
              <span> 锅炉房A热能曲线图 </span>
              <div class="chart">
                <eChart :option="heatOption" name="heatOption" />
              </div>
            </div>
            <div class="charts">
              <span> 冷水机房A冷能曲线图 </span>
              <div class="chart">
                <eChart :option="coldOption" name="coldOption" />
              </div>
            </div>
          </div>
        </a-card>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .formState {
    margin: 10px 0;
    display: flex;
    align-items: center;
    span {
      margin: 0 10px;
    }

    .ant-select {
      width: 250px;
    }

    .ant-checkbox-wrapper {
      margin: 0 0 0 20px;
    }

    button {
      margin-left: 20px;
    }
  }

  .info {
    display: flex;
    .left {
      width: 50%;
      margin: 0 5px;

      .total {
        margin: 0 0 15px 0;
        font-size: 16px;
      }
      .ant-card {
        width: 100%;
        height: 100%;
      }
    }

    .right {
      width: 50%;
      margin: 0 5px;

      .ant-card {
        width: 100%;
        height: 50%;
        min-height: 80vh;

        .rightCharts {
          display: flex;
          flex-wrap: wrap;
          .charts {
            width: 50%;
            margin-top: 10px;
            .chart {
              width: 100%;
              height: 20vh;
              margin-top: 5px;
            }
            &:nth-of-type(1) {
              width: 100%;
            }
          }
        }
      }
    }
  }
</style>
